<script setup lang="ts">
import type { AttachmentItem } from '@/components/AttachmentList.vue'
// 附件列表组件演示页面
import { reactive } from 'vue'
import AttachmentList from '@/components/AttachmentList.vue'

// 模拟附件数据
const mockAttachments = reactive<AttachmentItem[]>([
  {
    id: '1',
    name: '产品需求文档.pdf',
    url: 'https://example.com/docs/product-requirement.pdf',
    type: 'pdf',
    size: 2048000, // 2MB
    description: '详细的产品需求说明文档',
  },
  {
    id: '2',
    name: '项目架构图.png',
    url: 'https://example.com/images/architecture.png',
    type: 'image',
    size: 512000, // 512KB
    description: '系统架构设计图',
    thumbnailUrl: 'https://example.com/images/architecture-thumb.png',
  },
  {
    id: '3',
    name: '用户界面设计.jpg',
    url: 'https://example.com/images/ui-design.jpg',
    type: 'image',
    size: 1024000, // 1MB
    description: '用户界面设计方案',
  },
  {
    id: '4',
    name: '技术规范文档.pdf',
    url: 'https://example.com/docs/tech-spec.pdf',
    type: 'pdf',
    size: 1536000, // 1.5MB
    description: '技术实现规范',
  },
  {
    id: '5',
    name: '功能截图1.png',
    url: 'https://example.com/screenshots/feature1.png',
    type: 'image',
    size: 768000, // 768KB
    description: '功能演示截图',
  },
  {
    id: '6',
    name: '功能截图2.png',
    url: 'https://example.com/screenshots/feature2.png',
    type: 'image',
    size: 896000, // 896KB
    description: '功能演示截图',
  },
  {
    id: '7',
    name: 'API接口文档.pdf',
    url: 'https://example.com/docs/api-docs.pdf',
    type: 'pdf',
    size: 3072000, // 3MB
    description: 'API接口详细文档',
  },
  {
    id: '8',
    name: '数据库设计.xls',
    url: 'https://example.com/docs/database-design.xls',
    type: 'other',
    size: 102400, // 100KB
    description: '数据库表结构设计',
  },
  {
    id: '9',
    name: '测试报告.docx',
    url: 'https://example.com/docs/test-report.docx',
    type: 'other',
    size: 256000, // 250KB
    description: '系统测试报告',
  },
  {
    id: '10',
    name: '部署指南.pdf',
    url: 'https://example.com/docs/deployment-guide.pdf',
    type: 'pdf',
    size: 1280000, // 1.25MB
    description: '系统部署指南',
  },
])

// 状态管理
const state = reactive({
  previewMode: 'grid' as 'grid' | 'list',
  columns: 3,
  showSize: true,
  showDownload: true,
  maxDisplay: 9,
  previewVisible: false,
  previewTitle: '',
  previewIndex: 0,
})

// 处理预览事件
function handlePreview(item: any, index: number) {
  state.previewIndex = index
  state.previewVisible = true
  state.previewTitle = `${index + 1}. ${item.name}`
}

// 处理下载事件
function handleDownload(item: any) {
  console.log('下载文件:', item.name)
  uni.showToast({
    title: `开始下载 ${item.name}`,
    icon: 'none',
  })
}

// 处理删除事件
function handleDelete(item: any) {
  console.log('删除文件:', item.name)
  const index = mockAttachments.findIndex(attachment => attachment.id === item.id)
  if (index !== -1) {
    mockAttachments.splice(index, 1)
  }
  uni.showToast({
    title: '删除成功',
    icon: 'success',
  })
}

// 切换预览模式
function togglePreviewMode() {
  state.previewMode = state.previewMode === 'grid' ? 'list' : 'grid'
}

// 切换列数（仅网格模式）
function changeColumns(columns: number) {
  state.columns = columns
}

// 切换显示设置
function toggleShowSize() {
  state.showSize = !state.showSize
}

function toggleShowDownload() {
  state.showDownload = !state.showDownload
}

// 添加更多附件
function addMoreAttachments() {
  const newAttachments: AttachmentItem[] = [
    {
      id: Date.now().toString(),
      name: '新文档.pdf',
      url: 'https://example.com/docs/new-document.pdf',
      type: 'pdf',
      size: 512000,
      description: '新增的技术文档',
      thumbnailUrl: undefined,
    },
    {
      id: (Date.now() + 1).toString(),
      name: '新图片.jpg',
      url: 'https://example.com/images/new-image.jpg',
      type: 'image',
      size: 256000,
      description: '新上传的图片文件',
      thumbnailUrl: undefined,
    },
  ]
  mockAttachments.push(...newAttachments)
}

// 重置附件列表
function resetAttachments() {
  const resetAttachments: AttachmentItem[] = [
    {
      id: '1',
      name: '产品需求文档.pdf',
      url: 'https://example.com/docs/product-requirement.pdf',
      type: 'pdf',
      size: 2048000,
      description: '详细的产品需求说明文档',
      thumbnailUrl: undefined,
    },
    {
      id: '2',
      name: '项目架构图.png',
      url: 'https://example.com/images/architecture.png',
      type: 'image',
      size: 512000,
      description: '系统架构设计图',
      thumbnailUrl: 'https://example.com/images/architecture-thumb.png',
    },
    {
      id: '3',
      name: '用户界面设计.jpg',
      url: 'https://example.com/images/ui-design.jpg',
      type: 'image',
      size: 1024000,
      description: '用户界面设计方案',
      thumbnailUrl: undefined,
    },
  ]
  mockAttachments.splice(0, mockAttachments.length, ...resetAttachments)
}

// 清空附件列表
function clearAttachments() {
  mockAttachments.splice(0, mockAttachments.length)
}
</script>

<template>
  <view class="attachment-demo-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">附件列表组件演示</text>
      <text class="page-subtitle">支持图片和PDF预览的附件管理组件</text>
    </view>

    <!-- 控制面板 -->
    <view class="control-panel">
      <view class="control-section">
        <text class="control-title">预览模式</text>
        <view class="control-buttons">
          <button
            class="control-btn"
            :class="{ active: state.previewMode === 'grid' }"
            @click="state.previewMode = 'grid'"
          >
            网格模式
          </button>
          <button
            class="control-btn"
            :class="{ active: state.previewMode === 'list' }"
            @click="state.previewMode = 'list'"
          >
            列表模式
          </button>
        </view>
      </view>

      <!-- 网格模式控制 -->
      <view v-if="state.previewMode === 'grid'" class="control-section">
        <text class="control-title">列数设置</text>
        <view class="control-buttons">
          <button
            class="control-btn small"
            :class="{ active: state.columns === 2 }"
            @click="state.columns = 2"
          >
            2列
          </button>
          <button
            class="control-btn small"
            :class="{ active: state.columns === 3 }"
            @click="state.columns = 3"
          >
            3列
          </button>
          <button
            class="control-btn small"
            :class="{ active: state.columns === 4 }"
            @click="state.columns = 4"
          >
            4列
          </button>
        </view>
      </view>

      <!-- 显示设置 -->
      <view class="control-section">
        <text class="control-title">显示设置</text>
        <view class="control-buttons">
          <button
            class="control-btn"
            :class="{ active: state.showSize }"
            @click="toggleShowSize"
          >
            {{ state.showSize ? '隐藏' : '显示' }}大小
          </button>
          <button
            class="control-btn"
            :class="{ active: state.showDownload }"
            @click="toggleShowDownload"
          >
            {{ state.showDownload ? '隐藏' : '显示' }}下载
          </button>
        </view>
      </view>

      <!-- 数据管理 -->
      <view class="control-section">
        <text class="control-title">数据管理</text>
        <view class="control-buttons">
          <button class="control-btn" @click="addMoreAttachments">
            添加附件
          </button>
          <button class="control-btn" @click="resetAttachments">
            重置列表
          </button>
          <button class="control-btn danger" @click="clearAttachments">
            清空列表
          </button>
        </view>
      </view>
    </view>

    <!-- 附件列表 -->
    <view class="attachment-section">
      <text class="section-title">附件列表 ({{ mockAttachments.length }} 个文件)</text>

      <AttachmentList
        :attachments="mockAttachments"
        :show-size="state.showSize"
        :show-download="state.showDownload"
        :columns="state.columns"
        :preview-mode="state.previewMode"
        :max-display="state.maxDisplay"
        :preview-visible="state.previewVisible"
        :preview-title="(item) => `${item.name}`"
        @preview="handlePreview"
        @download="handleDownload"
        @delete="handleDelete"
        @update:preview-visible="state.previewVisible = $event"
      />
    </view>

    <!-- 隐藏的预览控制器 -->
    <view v-if="state.previewVisible" class="preview-overlay" @click="state.previewVisible = false">
      <view class="preview-tips">
        <text class="tips-title">预览功能说明</text>
        <text class="tips-content">图片可直接预览，PDF文件建议下载查看</text>
        <text class="tips-content">H5环境下支持完整预览功能</text>
        <text class="tips-content">小程序环境建议使用下载功能</text>
        <button class="tips-close-btn" @click="state.previewVisible = false">
          知道了
        </button>
      </view>
    </view>

    <!-- 功能说明 -->
    <view class="feature-info">
      <text class="info-title">功能特性</text>
      <view class="feature-list">
        <view class="feature-item">
          <text class="feature-icon">✅</text>
          <text class="feature-text">支持图片和PDF文件预览</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">✅</text>
          <text class="feature-text">网格和列表两种显示模式</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">✅</text>
          <text class="feature-text">跨平台兼容性（H5/小程序/APP）</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">✅</text>
          <text class="feature-text">文件下载和删除功能</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">✅</text>
          <text class="feature-text">文件大小显示和格式化</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">✅</text>
          <text class="feature-text">支持最大显示数量控制</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.attachment-demo-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 12px;
}

// 页面头部
.page-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 20px 16px;
  margin-bottom: 16px;
  text-align: center;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-title {
  display: block;
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
  display: block;
  font-size: 14px;
  color: #6b7280;
  opacity: 0.8;
  font-weight: 400;
}

// 控制面板
.control-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  margin-bottom: 16px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.control-section {
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);

  &:last-child {
    margin-bottom: 0;
  }
}

.control-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
  }
}

.control-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.control-btn {
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.9);
  }

  &.small {
    padding: 8px 14px;
    font-size: 12px;
  }

  &.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);

    &:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }
  }

  &.danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4);

    &:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
    }
  }

  &::after {
    border: none;
  }

  &:active {
    transform: translateY(0) scale(0.98);
    transition: transform 0.1s ease;
  }
}

// 附件区域
.attachment-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  margin-bottom: 16px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  text-align: center;
}

// 预览遮罩层
.preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.preview-tips {
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 80vw;
  text-align: center;
}

.tips-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
}

.tips-content {
  display: block;
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;

  &:last-child {
    margin-bottom: 16px;
  }
}

.tips-close-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;

  &::after {
    border: none;
  }
}

// 功能说明
.feature-info {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.info-title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
  text-align: center;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(4px);
  }
}

.feature-icon {
  font-size: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  color: white;
  flex-shrink: 0;
}

.feature-text {
  font-size: 14px;
  color: #4b5563;
  font-weight: 500;
  line-height: 1.4;
}
</style>
